<template>
	<view class="column-page">
		<image mode="widthFix" class="bg" src="/static/img/base1.png"></image>
		<view class="type-box">
			<view class="item" v-for="(item,index) in list" @tap="goPage(item)">
				<span class="iconfont" :class="item.icon" :style="'background:'+item.bg"></span>
				<span class="text">{{item.title}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		components: {},
		data() {
			return {
				list:[
					{bg:'#62d4a6',icon:'iconjidi1',title:'建设专题',path:'column_list',type:'1269154933620690944'},
					{bg:'#9376f5',icon:'iconfupin1',title:'扶贫专题',path:'column_list',type:'1269154933620690945'},
					{bg:'#62ccd4',icon:'iconfangyijiaoyu',title:'防疫专题',path:'column_list',type:'1269154933620690946'},
				]
			}
		},
		onLoad() {

		},
		methods: {
			goPage(item){
				uni.navigateTo({
					url:item.path+'?type='+item.type+'&title='+item.title
				})
			},
			back(){
				uni.navigateBack({
				    delta: 2
				});
			},
			search(){

			},
			change(item){
				this.current = item.detail.current;
			},
			goSelect(){
				console.log(222)
			},
			select(index){
				this.active = index;
				this.list.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active"
					}
					else{
						item.addClass = ""
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.column-page{
		width:100%;
		height:100%;
		background:#f4f4f4;
		overflow-y:auto;
		.type-box{
			width:100%;
			box-sizing:border-box;
			padding:0 60rpx;
			position:relative;
			top:-80rpx;
			.item{
				width:100%;
				height:220rpx;
				margin-bottom:40rpx;
				border-radius:16rpx;
				background:#ffffff;
				box-shadow:0 2rpx 10rpx #d8d8d8;
				display:flex;
				align-items:center;
				box-sizing:border-box;
				padding:0 70rpx;
				.iconfont{
					width:140rpx;
					height:140rpx;
					display:block;
					line-height:140rpx;
					text-align:center;
					color:#fff;
					font-size:64rpx;
					border-radius:50%;
					margin-right:40rpx;
				}
				.text{
					font-size:36rpx;
					color:#555555;
				}
			}
		}
		.bg{
			width:100%;
		}
	}
</style>
